<template>
	<view class="acceptance">
		<view class="tabs-container">
			<Tab :list="status" class="" v-model:current="current" @change="change">
				<template #default="{ item }">
					{{ item.title }}
				</template>
			</Tab>
		</view>
		<view class="list">
			<view class="item" v-for="plan in planList" :key="plan.modelId">
				<image class="head-img" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/acceptance-head.png" mode=""></image>
				<view class="head-title">
					<view class="head-title-text">{{ plan.modelName }}</view>
					<view :class="{ icon: true, collapse: plan.collapse }" @click="collapseUnfold(plan)"><wd-icon
							name="arrow-down" size="22px"></wd-icon>
					</view>
				</view>
				<view class="item-list" v-if="!plan.collapse">
					<view class="content" v-for="planItem, index in plan.content" :class="{ one: index == 0 }">
						<view class="title"> 
							<view class="tag">{{ planItem.craftName }}
								<wd-tag   :color="acceptanceStatusObj[planItem.status]?.color"
									:bg-color="acceptanceStatusObj[planItem.status]?.bg">
									{{ acceptanceStatusObj[planItem.status]?.text }}
								</wd-tag>
							</view>
							<view class="link" @click="toStandard(planItem.checkId)">验收标准</view>
						</view>
						<view class="desc">
							<wd-text lines="1" v-if="planItem.checkDesc" :text="planItem.checkDesc"></wd-text>
							<view class="img-list">
								<image v-for="img, index in splitStrToArray(planItem.picUrls)"
									@click="previewImage(splitStrToArray(planItem.picUrls), index)" :src="img"></image>
							</view>
						</view>
						<view class="to-detail" v-if="[2,5,6,8].includes(planItem.status)" @click="toAcceptance(planItem.checkId,planItem.status)">去验收
						</view>
						<image v-if="[5,8].includes(planItem.status)" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/refuse-status.png" class="stamp"></image>
						<image v-else-if="[4,7].includes(planItem.status)" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/accepted-status.png" class="stamp"></image>
						<view class="clasp" v-if="index != plan.content?.length - 1">
							<view class="clasp-item">
								<view class="circle"></view>
								<view class="line"></view>
								<view class="circle"></view>
							</view>
							<view class="clasp-item">
								<view class="circle"></view>
								<view class="line"></view>
								<view class="circle"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		 <Empty v-if="(!planList.length)" />
	</view>
</template>

<script setup>
import { ref} from "vue";
import Tab from "@/components/tabs";
import Empty from "@/components/empty/index.vue";
import { getList } from "@/api/acceptance";
import { onShow } from '@dcloudio/uni-app'
import { splitStrToArray, previewImage } from "@/utils/utils";
import {acceptanceStatusObj} from "../acceptanceCofig";
import useUserStore from "@/store/modules/user/index.js";

const userStore = useUserStore();
const customerId = userStore.userInfo?.customerId;
const status = {
	0: { title: '全部', value:'all'},
	1: { title: '进行中', value: 'inProgress' },
	2: { title: '验收中', value: 'inReview' },
	3: { title: '已验收', value: 'accepted' }
};

const current = ref(0);
const planList = ref([])

/**
 * 展开or收起 
 */
const collapseUnfold = (item) => {
	item.collapse = !item.collapse
}

/**
 * 获取列表
 */
const getPlanList = async () => {
	try {
    const res = await getList(customerId,status[current.value].value ? { checkState: status[current.value].value,acceptance:true } : {});
    planList.value = res.data ? res.data.map(v => ({ ...v, collapse: false })) : []
	} catch (error) {
		console.log(error)
	}
}
/**
 * 去往标准
 */
const toStandard = (checkId) => {
	uni.navigateTo({
		url: '/pages/acceptanceManage/standard/standard?checkId=' + checkId
	})
}
/**
 * 去往验收
 */
const toAcceptance = (checkId,status) => {
	uni.navigateTo({
		url: "/pages/acceptanceManage/detail/detail?checkId=" + checkId + "&status=" + status
	})
}
/**
 * 切换tab
 */
const change = () => {
	planList.value = [];
	getPlanList();
}
onShow(() => {
	getPlanList();
})
</script>

<style lang="scss" scoped>
@import "list.scss";
</style>
